﻿<template>
  <div class="auth">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>我的服装设计</el-breadcrumb-item>
      <el-breadcrumb-item>用户认证</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content-core">
<!--      <div class="content-header">你当前的认证是：{{role}}</div>-->
      <div>认证/重新认证：</div>
      <div class="core">
        <div class="content">
          <span>设计师认证</span>
          <div>
            <img src="@/assets/auth/4.png" @click="changeAuth(1)"></img>
          </div>
        </div>
        <div class="content">
          <span>工作室认证</span>
          <div>
            <img src="@/assets/auth/1.png" @click="changeAuth(2)"></img>
          </div>
        </div>
        <div class="content">
          <span>企业认证</span>
          <div>
            <img src="@/assets/auth/3.png" @click="changeAuth(3)"></img>
          </div>
        </div>
      </div>
      <div class="core-content">
        <el-dialog
            :title="title"
            :visible.sync="open"
            width="1050px"
            top="0"
            :close-on-click-modal="false"
        >
          <div class="sketch-content">
            <designer-auth v-if="authType === 1"></designer-auth>
            <studio-auth v-if="authType === 2"></studio-auth>
            <enterprise-auth v-if="authType === 3"></enterprise-auth>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>

</template>

<script>
import DesignerAuth from "@/views/person/auth/components/DesignerAuth";
import StudioAuth from "@/views/person/auth/components/StudioAuth";
import EnterpriseAuth from "@/views/person/auth/components/EnterpriseAuth";
import {getRecentPassAuthInfo} from '@/api/user'
import {getInfo} from '@/api/login'

export default {
  name: "Auth",
  components: {EnterpriseAuth, StudioAuth, DesignerAuth},
  data() {
    return {
      authContent: [
        {type: 1, title: '设计师认证'},
        {type: 2, title: '工作室认证'},
        {type: 3, title: '企业认证'},
      ],
      authType: 0,
      rules: {},
      title: '',
      open: false,
      roleType:1,
      role:'未认证'
    }
  },
  created() {
    // getRecentPassAuthInfo()
    //     .then(res => {
    //       console.log("---")
    //       console.log(res)
    //     })
    //     .catch(err => {
    //       console.log(err)
    //     })

    // 获取当前用户的认证信息
    getInfo()
        .then(res => {
          // console.log(res)
          this.roleType=res.roleType;
          if(this.roleType==1){
            this.role='未认证';
          }
          if(this.roleType==2){
            this.role='设计师';
          }
          if(this.roleType==3){
            this.role='工作室';
          }
          if(this.roleType==4){
            this.role='企业';
          }
        })
        .catch(err => {
          console.log(err)
        })
  },
  methods: {
    changeAuth(type) {
      this.title = this.authContent.find(item => item.type === type).title
      this.open = true
      this.authType = type
    }
  }
}
</script>

<style lang='scss' scoped>
.auth {
  width: 100%;
  height: 100%;

  .content-core {
    margin: 0 auto;
    margin-top: 20px;
    padding: 0 40px;

    .content-header {
      font-weight: bold;
      font-size: 20px;
    }

    .core {
      display: flex;
      justify-content: space-between;

      .content {
        width: 30%;
        height: 30%;
        display: inline-block;
        text-align: center;

        img {
          width: 100%;
          height: 100%;
        }

        img:hover {
          border: 1px dashed #ccc;
        }
      }
    }

    .core-content {
      width: 40%;
      margin: 0 auto;
      margin-top: 20px;
      padding: 0 30px;
    }

  }

}

.sketch-content {
  // 必须有高度 overflow 为自动
  overflow: auto;
  height: 80vh;
  border-top: 1px solid #eff1f4;
  border-bottom: 1px solid #eff1f4;
  padding: 0px 30px 11px 27px;
}

// 滚动条的样式,宽高分别对应横竖滚动条的尺寸
.sketch-content::-webkit-scrollbar {
  width: 3px;
}

// 滚动条里面默认的小方块,自定义样式
.sketch-content::-webkit-scrollbar-thumb {
  background: #8798AF;
  border-radius: 2px;
}

// 滚动条里面的轨道
.sketch-content::-webkit-scrollbar-track {
  background: transparent;
}

</style>
